<template>
  <div class="login">
    <div class="loginBanner">
      <div class="loginHeader">
        <img src="../../../images/common/logo.png" />
      </div>
      <div class="loginBox">
        <div class="loginForm">
          <el-form ref="loginForm" :model="loginForm" :rules="rules">
            <el-form-item label="" prop="userName" class="userName">
              <el-input v-model="loginForm.userName" placeholder="user name" id="userName"></el-input>
            </el-form-item>
            <div class="mt25">
	            <el-form-item label="" prop="password">
                <el-input type="password" placeholder="password" v-model="loginForm.password" ref="password" id="password" @enterEvent="enterEvent"></el-input>
	            </el-form-item>
            </div>
            <div class="mt25">
	            <el-form-item label="" prop="identify" v-if="showValidateCode">
	              <el-row>
	                <el-col :span="12">
	                  <el-input v-model="loginForm.identify" placeholder="验证码" id="identify" @keyup.enter.native="doLogin($event)"></el-input>
	                </el-col>
	                <el-col :span="4" class="tar">
	                  <!--<el-button style="background:#fef5e8;color:#ee6b00;">验证码区域</el-button>-->
	                  <img :src="logonImageCode" @click="verifyImage" id="click-verifyImage" style="background:#fef5e8;color:#ee6b00;" />
	                </el-col>
	              </el-row>
	            </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="loginButton" style="cursor:pointer;">
          <img src="../../../images/login/login_button.png" alt="" @click="login('loginForm')" id="loginButton">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      maxlength: "20",
      isLogin: false,
      userTemp: "",
      loginForm: {
        userName: "0000000",
        password: "",
        identify: ""
      },
      pwConfig: {
        //pwdStrength:true,     //开启密码强度,默认关闭
        //pgeMaxlength:20,      //密码长度,默认6
        //isLoginIncludeNum:false,
        pgeId: "pgeId",
        initId: "initId"
      },
      showValidateCode: false, //标识是否显示验证码
      logonImageCode: "", //接受验证码图片
      rules: {
        userName: [
          { required: true, message: "required", trigger: "blur" },
          { min: 1, max: 20, message: "length 6 to 20", trigger: "blur" },
          { validator: this.isNumEng, trigger: "blur" }
          //校验是否需要验证码
          //{ validator: this.validateCodeAndUserStt, trigger: 'blur' },
        ],
        password: [
          //{ validator: this.$tools.validator.pwdValidator, vm: this, formName: 'loginForm' },
        ],
        identify: [
          {
            required: this.showValidateCode,
            message: "验证码不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },

  methods: {
    //请求验证码图片
    verifyImage() {
      var _this = this;
      let keyWord = Math.random();
      // _this.logonImageCode = "/api/inmanage/IM000000.do?versionNo=1.0&keyWord=" + keyWord  //开发用
      _this.logonImageCode =
        "/inmanage/IM000000.do?versionNo=1.0&keyWord=" + keyWord; // 部署用
      _this.$tools.storage.set("keyWord", keyWord);
    },

    //异步请求用户状态和是否需要验证码
    validateCodeAndUserStt(rule, value, callback) {
      let _this = this;
      if (_this.isLogin && _this.userTemp == _this.loginForm.userName) {
        callback();
      } else {
        let body = {};
        body.alias = _this.loginForm.userName;
        _this.$tools.request(_this, "IM000101.do", body).then(data => {
          let errorCode = data.body.errorCode;
          let errorMsg = "System Error Try again";
          if (errorCode == "" || errorCode == null || errorCode == "0") {
            _this.showValidateCode = data.body.showValidateCode;
            _this.isLogin = true;
            _this.userTemp = _this.loginForm.userName;
            if (_this.showValidateCode == "false") {
              this.showValidateCode = false;
            } else {
              this.showValidateCode = true;
            }
            callback();
          } else {
            _this.isLogin = false;
            //console.log(errorCode)
            return callback(errorMsg);
          }
        });
      }
    },

    //校验用户名不能为中文
    isNumEng(rule, value, callback) {
      let _this = this;
      if (_this.$tools.validator.isNumEng(value))
        return callback("type error ，only number or char");
      callback();
    },

    //enter事件(密码框)
    enterEvent(val) {
      $("#loginButton").click();
    },
    //enter事件(验证码)
    doLogin: function(ev) {
      if (ev.keyCode == 13) {
        //alert("11111111")
        this.login("loginForm");
      }
    },

    //初始化tab
    addTabIndex() {
      $("#userName").attr("tabindex", "1");
      $("#identify").attr("tabindex", "3");
      $("#loginButton").attr("tabindex", "4");
    },

    login(loginForm) {
      //登陆请求
      let _this = this;
      _this.$refs["loginForm"].validate(valid => {
        if (valid) {
          let body = {};
          body.userNo = _this.loginForm.userName;
          body.password = _this.loginForm.password;
          // body.randomNum = _this.$refs['password'].srandNum
          // body.keyWord = _this.$tools.storage.get("keyWord")
          // body.codeIn = _this.loginForm.identify
          //console.log(_this.loginForm.password)
          //console.log("BODY:"+JSON.stringify(body))
          
          _this.$tools.request(_this, "IM000002Action.do", body).then(data => {
            //console.log("data:"+JSON.stringify(data))
            let errorCode = data.body.errorCode;
            let errorMsg = "System Error Try again";
            if (errorCode == "" || errorCode == null || errorCode == "0") {
              let user = data.body;
              //console.log("执行user存入")
              _this.$tools.storage.set("user", user); //储存登录数据信息
              if ("1" == user.firstLog) {
                _this.$router.push({ path: "/my/components/modifyPwd" });
              } else {
                _this.$router.push({ path: "/my/myMain" });
              }
            } else {
              //刷新验证码
              _this.verifyImage();
              if (errorCode == "IM000102030") {
                //弹出登录失败提示
                _this.showValidateCode = true;
                //alert(errorMsg)
                _this.$alert(errorMsg, {
                  confirmButtonText: "Confirm"
                });
              } else {
                //弹出登录失败提示
                //alert(errorMsg)
                _this.$alert("System Error Try again", {
                  confirmButtonText: "Confirm"
                });
              }
            }
          });
        } else {
          //alert('校验不通过')
          _this.$alert("validate error", {
            confirmButtonText: "Confirm"
          });
        }
      });
    }
  },
  mounted() {
    let _this = this;
    //验证码初始化
    //_this.verifyImage()
    //tab 初始化
    this.addTabIndex();
  }
};
</script>

<style lang="scss">
.login {
  width: 100%;
  height: auto;
  background: #fff;
}

.loginBanner {
  position: relative;
  width: 1400px;
  height: 720px;
  margin: 0 auto;
  background: url(../../../images/login/banner_pic.png) no-repeat center;
  background-color: #fff;
  padding-top: 40px;
}

.loginHeader {
  position: absolute;
  top: 20px;
  right: 280px;
}

.loginBox {
  background: url(../../../images/login/login_bj.png) no-repeat;
  width: 569px;
  height: 326px;
  position: absolute;
  top: 170px;
  right: 200px;
}

.login .loginForm {
  width: 350px;
  height: 160px;
  margin-top: 73px;
  margin-left: 142px;
}

.login .loginForm input {
  width: 260px;
  height: 40px;
  padding-left: 32px;
}

#userName input {
  background: url(../../../images/login/person_icon.png) no-repeat left;
  background-position: 6px 8px;
  background-color: #fef5e8;
}

#password{
  background: url(../../../images/login/password.png) no-repeat left;
  background-position: 6px 8px;
  background-color: #fef5e8;
}
#identify input {
  width: 170px;
  background: url(../../../images/login/code_icon.png) no-repeat left;
  background-position: 6px 8px;
  background-color: #fef5e8;
}

.login .loginForm .el-form-item {
  margin-bottom: 10px;
}

#identify .el-form-item {
  position: relative;
}

#password .el-form-item {
  position: relative;
}

.login .loginForm .el-form-item:nth-of-type(3) .el-button {
  position: absolute;
  top: 1px;
  right: 90px;
  padding-left: 5px;
  padding-right: 5px;
}

.login .loginForm .fogot {
  position: absolute;
  top: 1px;
  right: 24px;
}

.loginButton {
  margin-left: 270px;
  margin-top: 30px;
}

.loginForm .password .passwordB {
  width: 228px;
  border-radius: 4px;
  padding-left: 30px;
}
.loginForm .password {
  background: url(../../../images/login/password.png) no-repeat;
  background-position: 6px 7px;
}

.loginForm #identify {
  background: url(../../../images/login/code_icon.png) no-repeat;
  background-position: 6px 7px;
}
#identify {
  width: 170px;
}
.userName .el-input input {
  background: url(../../../images/login/person_icon.png) no-repeat left;
  background-position: 6px 8px;
  background-color: #fef5e8;
}
</style>
